<template>
    <div class="box" style="border-bottom: none;">


        <!-- 搜索部分 -->
        <el-form :inline="true" :model="searchDate" class="demo-form-inline">
            <el-form-item label="输入搜索：">
                <el-input v-model="searchDate.name" placeholder="商品名称/商品货号" clearable />
            </el-form-item>
            <el-form-item label="商品分类：">
                <el-select v-model="searchDate.className" placeholder="请选择商品分类" clearable>
                    <el-option :label="item" :value="item" v-for="(item,i) in $className" :key="i" />
                    
                </el-select>
            </el-form-item>
            <el-form-item label="上下架：">
                <el-select v-model="searchDate.lable" placeholder="全部" clearable>
                    <el-option label="全部" value='' />
                    <el-option label="已上架" :value=2 />
                    <el-option label="已下架" :value=1 />

                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">+添加商品</el-button>
            </el-form-item>
        </el-form>
        <!-- 批量操作 -->
        <div class="mt-4" style="display: flex;flex-direction: row-reverse;margin-right: 30px;">
            <el-select v-model="select" placeholder="操作类型" style="width: 115px">
                <el-option label="批量删除" value="批量删除" />
                <el-option label="批量上架" :value=2 />
                <el-option label="批量下架" :value=1 />
            </el-select>
            <el-button @click="morefn" type="primary">批量操作</el-button>
        </div>

        <!-- 表格部分 -->


        <el-table :data="listDate" @selection-change="change3" style="width: 100%" border
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">

            <el-table-column prop="id" label="编号" />
            <el-table-column type="selection" />
            <el-table-column prop="picture" label="商品图片">
                <template #default="scope">
                    <img :src="scope.row.picture" style="width:100px;height: 100px;" />
                </template>
            </el-table-column>
            <el-table-column prop="classAndMassage" label="商品信息">
                <template #default="scope">
                    <div>{{ scope.row.classAndMassage.name }}</div>
                    <div>{{ scope.row.classAndMassage.className
                    [0].className }}>>{{ scope.row.classAndMassage.className
[1].className }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="priceAndArNo" label="价格/货号" width="180">
                <template #default="scope">
                    <p>价格：￥{{ scope.row.priceAndArNo.price }}</p>
                    <p>货号:No{{ scope.row.priceAndArNo.artNo }}</p>
                </template>
            </el-table-column>

            <el-table-column prop="lable" label="标签">
                <template #default="scope"> {{ scope.row.lable === 2 ? '已上架' : '已下架' }}</template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="salesVolume" label="销量" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 分页部分 -->
        <div class="fenye">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>


<script setup lang="ts">
import { useCounterStore } from '@/stores/kfdd/ksdd';
import { More } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from '../WuJiUtils/http';
const searchDate: any= reactive({})
// let listDate:any = reactive([
//     { id: 1, picture: '', classAndMassage:{name:'',className:{}},priceAndArNo:{price:1,artNo:''},lable:'',salesVolume:100,sort:999},
// ])
let listDate: any = ref([])
let total = 100
let className = ref('')
let name = ref('')
let lable: any = ref(0)
let checkdata: any = reactive([])
let select:any=ref('')
const morefn=()=>{
    let $lable:any=ref(0)
    $lable.value=select.value
    console.log($lable);
    
    if($lable.value=='批量删除'){
        console.log(1)
        axios({
        url: '/CommodityController/deleteByIds',
        method: "post",
        data: { ids: checkdata }
    }).then((res) => {
        console.log(res);
        render()
    })
    }else{
        console.log(2)
        axios({
        url: '/CommodityController/UpdateByIds',
        method: "post",
        data: { ids: checkdata,lable:$lable.value }
    }).then((res) => {
        console.log(res);
        render()
    })
    }
}


const change3 = (e: any) => {
    // const a=ref()
    // console.log(a.value);
    // console.log(e);
    // checkdata=e
    const _e = e.map((i) => {
        return i = i.id
    })
    checkdata = _e
    console.log(checkdata);

}
// interface IlistDate { id: number, imgs: string, title: string, msg: { price: number, huohao: number }, type: boolean, paixu: number,number:number }
interface IsearchDate { name: string, className: string, lable: number | string }
function search() {
    console.log(searchDate);
    className.value = searchDate.className
    name.value = searchDate.name
    // lable.value=searchDate.lable
    // if(searchDate.lable==''){
    //     lable.value=searchDate.lable
    // }else{
    //     lable.value=Number(searchDate.lable)
    // }
    lable.value = searchDate.lable
    render()
}
function del(id: number) {
    axios({
        url: '/CommodityController/deleteById',
        method: "get",
        params: { id: id }
    }).then((res) => {
        render()
    })
}
const router = useRouter()
function add() {
    router.push('/home/addsplb')
}

// const onSubmit = function () {

// }


const store = useCounterStore()
function edit(id: number) {
    store.id=id
    axios({
        url:'/CommodityController/findById',
        method:'get',
        params:{id:id}
    }).then((res)=>{
        
        if(res.data.code==0)
        store.edithuixian=res.data.data
        console.log(store.edithuixian);
        router.push('/home/editsplb')

    })
    
}

let currentPage4 = ref(1)
let pageSize4 = ref(5)
const handleSizeChange = (v) => {
    pageSize4.value = v
    console.log(pageSize4.value);
    render()
}
const handleCurrentChange = (v) => {
    currentPage4.value = v
    console.log(currentPage4.value);
    render()
}

async function render() {
    await axios({
        url: '/CommodityController/findAllByQueryDtou',
        
        method: "post",
        data: { page: currentPage4.value, limit: pageSize4.value, className: className.value, name: name.value, lable: lable.value }
    }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
            listDate.value = res.data.data
            total = res.data.count
        }
    })
}
let $className=ref([])
const Hselect=()=>{
    axios({
        url: '/CommodityController/findClass',
        method: "get",
    }).then((res)=>{
        console.log(res);
        $className.value=res.data.data.map((i)=>{
            return i=i.className
        })
        console.log($className.value);
        
    })
}
onMounted(() => {
    render()
    Hselect()
    console.log(listDate.value);

})

</script>






<style scoped lang="less"> .name {
     margin-top: 25px;
 }

 .box {
     width: 96%;
     margin: 0 auto;
 }

 .el-form {
     margin-top: 25px;
     display: flex;
     justify-content: center;

 }

 .el-table {
     margin-top: 10px;
 }

 .fenye {
     margin-top: 15px;
     display: flex;
     justify-content: center;
 }
</style>